<template>
  <div id="shopPage">
    <h2>商铺轮播图</h2>
    <!-- 轮播区域 -->
    <el-carousel indicator-position="outside" motion-blur height="60rem" interval="2000" id="carousel">
      <el-carousel-item v-for="item in fileList" :key="item">
        <el-image :src="item.url" fit="contain"></el-image>
      </el-carousel-item>
    </el-carousel>
    <!-- 上传区域 -->
    <!-- 图片上传 -->
    <el-upload v-model:file-list="fileList" :action="uploadImageUrl" list-type="picture-card" accept=".jpg,.png"
      :headers="imgUploadHeaders" :on-preview="handlePictureCardPreview" :on-remove="handleImageRemove"
      :on-error="imgUploadError" :on-success="imgUploadSuccess">
      <el-icon>
        <Plus />
      </el-icon>
    </el-upload>
    <!-- 图片预览 -->
    <el-dialog v-model="previewDialogVisible">
      <el-image :src="previewImageUrl" fit="contain"></el-image>
    </el-dialog>
  </div>

</template>

<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import Cookies from 'js-cookie' // 获取Cookie
import { ElNotification } from 'element-plus'
const { proxy } = getCurrentInstance()

// --商铺轮播图--
// 轮播图图片列表
const fileList = ref([])
let uploadFileName = ref(0) // 上传的图片名称（最大的轮播图图片名）
const previewImageUrl = ref('') // 预览图片的地址
const previewDialogVisible = ref(false) // 预览图片的对话框 显示/隐藏 状态量

// 获取商铺轮播图列表
const getShopImagesList = () => {
  proxy.$api.getShopImagesList().then(res => {
    for (let i = 0; i < res.length; i++) {
      fileList.value.push(res[i])
      if (uploadFileName.value <= Number(res[i].name)) {
        uploadFileName.value = Number(res[i].name) + 1 // +1 保持上传的图片文件名最大
      }
    }
  })
}

// 移除图片事件
const handleImageRemove = (uploadFile) => {
  proxy.$api.deleteShopImage([uploadFile.name])
    .then(res => {
      if (res.code != -1) {
        ElNotification({
          title: '删除成功',
          type: 'success'
        })
      } else {
        ElNotification({
          title: '删除失败',
          type: 'error'
        })
      }
    })
}
// 预览图片事件
const handlePictureCardPreview = (uploadFile) => {
  previewImageUrl.value = uploadFile.url
  previewDialogVisible.value = true
}
// 商铺轮播图上传
const imgUploadHeaders = { 'Authorization': 'Bearer' + ' ' + Cookies.get('token') } // 图片上传JWT认证
const uploadImageUrl = computed(() => {
  return proxy.$api.baseURL + '/shop/addShopImage/' + uploadFileName.value
}) // 图片上传地址
const imgUploadError = () => { // 上传失败提示
  ElNotification({
    title: '上传失败',
    type: 'error'
  })
}
const imgUploadSuccess = () => { // 上传成功提示
  uploadFileName.value++ // 图片上传成功后 图片文件名加1
  fileList.value = [] // 清空图片列表
  getShopImagesList() // 重新获取图片列表
  ElNotification({
    title: '上传成功',
    type: 'success'
  })
}

onMounted(() => {
  getShopImagesList() // 获取商铺轮播图列表
})
</script>
<style lang="scss" scoped>
#shopPage {
  display: flex;
  align-items: center;
  flex-direction: column;

  h2 {
    font-size: 5rem;
    margin-bottom: 2rem;
  }

  #carousel {
    width: 100%;
  }
}
</style>
<style scoped>
/deep/.el-dialog {
  --el-dialog-bg-color: none;
  --el-dialog-box-shadow: none;
}

/deep/.el-dialog .el-icon {
  height: 5rem;
  width: 5rem;
}

/deep/.el-dialog .el-icon svg {
  height: 5rem;
  width: 5rem;
  color: #fff;
}
</style>